<template>
  <div class="flex-start-center list-r-4" :class="{
    wAuto: !width,
  }" :style="{
    width: typeof width === 'string' ? width : `${width}px`,
  }">
    <el-input class="flexAuto" v-model="data[dataName]" :size="size" :placeholder="placeholder" readonly disabled>
      <template #append v-if="url">
        <el-icon @click="download_Btn">
          <Download />
        </el-icon>
      </template>
    </el-input>
    <ElUploadBox title="上传" :data="data" :size="size" :accept="accept" @changeBtn="changeBtn" />
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    data: any;
    dataName?: any;
    url?: string;
    size?: string; //尺寸 '' | 'large' | 'default' | 'small'
    placeholder?: string; //输入框占位文本
    disabled?: boolean; //是否禁用
    readonly?: boolean; //是否只读
    type?: string; //类型文本-text  密码-password  文本-textarea
    width?: number | string; //宽度
    accept?: any; //宽度
  }>(),
  {
    type: 'text',
    size: 'default',
    autosize: true,
    placeholder: '请上传文件',
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn', files: any, dataInfo: any, form: any): void;
}>();
//下载文件
const download_Btn = () => {
  let _name = props.data[props.dataName];
  proxy.$com.message('下载成功');
  proxy.$com.downloadFile(props.url, proxy.$com.setFile(_name, 'name'), proxy.$com.setFile(_name, 'type'));
};
const changeBtn = (files: any, dataInfo: any, form: any) => {
  var formData = new FormData();
  formData.append('file', files.file);
  proxy.$api.ExcuteUploadFile.UploadSingleFile(formData)
    .then((res: any) => {
      proxy.$com.message('文件上传成功');
      emit('changeBtn', {
        ...files,
        fileUrl: res.fileUrl, //文件路径
      }, dataInfo, form);
    })
    .catch(() => { });
};
onMounted(() => { });
</script>
<style scoped></style>
